<template>
  <div class="withdrawal-box">
    <nav-bar title="提现" />
    <div class="content">
      <div class="deposit_amount">
        <div class="amount">
          <span class="text">冻结金额</span>
          <span class="money">￥{{ withdrawalInfo.deposit || 0 }}</span>
        </div>
      </div>
      <div class="Select-Account-Withdrawal">

      </div>
      <div class="allwithdrawalInput">
        <j-cell-group>
          <j-cell title="选择提现账户" class="bd-b" :value="accountValue.text" @click.native="SelectAccount"></j-cell>
        </j-cell-group>
        <j-input type="text" v-model="withdrawalAmount" label="提现金额" max="6" placeholder="请输入提现金额"
          @blur="withdrawalAmountBlur">
          <div class="allwithdrawal" @click="withdrawalAll"><span class="text">全部提现</span></div>
        </j-input>
      </div>
      <div class="p-info">提现手续费：{{ withdrawalInfo.serviceFeeRatio ? withdrawalInfo.serviceFeeRatio * 100 : '' }}%</div>
      <div class="loginBtn">
        <j-botton type="danger" :disabled="!withdrawalAmount" @click.native="withdrawal">提现</j-botton>
      </div>
      <van-popup v-model="iSpicker" position="bottom" :style="{ height: '280px' }">
        <van-picker :columns="accountList" show-toolbar :visible-item-count="visibleItemCount" title="选择账户列表"
          :item-height="itemHeight" @cancel="iSpicker=false" @confirm="onAccountChange" />
      </van-popup>
    </div>
    <van-popup v-model="showPayPassword" position="bottom" closeable :style="{ height: '13.4rem' }">
      <j-password-input @change="withdrawSecond">
        <div class="password-title bd-b">请输入支付密码</div>
        <div class="password-deposit">
          <span class="password-deposit__text">提现金额</span>
          <div class="password-deposit__amount">￥{{ withdrawalAmount * 0.95 }}</div>
        </div>
      </j-password-input>
    </van-popup>
  </div>
</template>
<script>
import md5 from 'md5';
import {
  mapGetters
} from 'vuex';
export default {
  name: 'withdrawal',
  data() {
    return {
      visibleItemCount: 4,
      itemHeight: 55,
      iSpicker: false,
      accountList: [],
      accountValue: {},
      withdrawalInfo: {},
      allAmount: 500,
      withdrawalAmount: '',
      showPayPassword: false
    };
  },
  computed: {
    ...mapGetters([
      'settingInfo'
    ])
  },
  created() {},
  mounted() {
    this.withdrawFirst();
  },
  methods: {
    SelectAccount() {
      this.iSpicker = true;
    },
    onAccountChange(picker, values) {
      this.accountValue = picker;
      this.iSpicker = false;
    },
    // 提现金额输入框失去焦点触发方法
    withdrawalAmountBlur() {
      this.$set(this, 'withdrawalAmount', parseInt(this.withdrawalAmount));
      if (this.withdrawalAmount < 1) {
        this.$set(this, 'withdrawalAmount', '');
        this.$toast('提现金额必须大于1元!');
        return;
      }
      if (this.withdrawalAmount > this.withdrawalInfo.deposit) {
        this.$set(this, 'withdrawalAmount', this.withdrawalInfo.deposit ? this.withdrawalInfo.deposit : '');
        this.$toast('提现金额不能大于账户余额!');
      }
    },
    // 所有金额提现
    withdrawalAll() {
      if (!this.accountValue.text) {
        this.$toast('请选择提现账户');
        return;
      }
      if (this.withdrawalInfo.deposit === 0) {
        this.$toast('没有余额不能提现!');
        return;
      }
      this.$set(this, 'withdrawalAmount', this.withdrawalInfo.deposit);
    },
    // 提现：第一步 获取收款账户 冻结金额金额 提现比例
    withdrawFirst() {
      this.$API.user.withdrawFirst().then(res => {
        if (res.code === 0) {
          if (res.data.collectionSettings.length > 0) {
            this.accountList = res.data.collectionSettings.map((item) => {
              return {
                text: item.typeName,
                value: item.type
              };
            });
            if (res.data.collectionSettings.length === 1) {
              this.accountValue = {
                text: res.data.collectionSettings[0].typeName,
                value: res.data.collectionSettings[0].type
              };
            }
          }
          this.$set(this, 'withdrawalInfo', res.data);
        }
      });
    },
    withdrawal() {
      if (!this.withdrawalAmount) {
        this.$toast('提现金额不能提现!');
        return;
      }
      if (!this.settingInfo.isSetPayPass) {
        // 这里的UI设置与组件是相反的所以确认就是取消
        this.$dialog.confirm({
          message: '请设置支付密码',
          width: '280px',
          confirmButtonText: '去设置',
          confirmButtonColor: '#999'
        }).then((res) => {
          this.$router.push({
            'path': '/payPassword'
          });
        });
        return;
      }
      this.$set(this, 'showPayPassword', true);
    },
    getSettingsInfo(type, callbrak) {
      var options = {
        type: type
      };
      this.$API.user.getSettingsInfo(options).then(res => {
        if (res.code === 0) {
          this.SettingsInfo = res.data || {};
          callbrak && callbrak(res.data);
        }
      });
    },
    // 提现：第二步 type 收款账户类型（1-微信，2-支付宝，3-银行卡）
    withdrawSecond(val) {
      console.log(this.withdrawalInfo);
      this.$set(this, 'showPayPassword', false);
      const options = {
        amount: this.withdrawalAmount,
        type: this.accountValue.value,
        payPass: md5(md5(val))
      };
      this.$API.user.withdrawSecond(options).then(res => {
        if (!res.code) {
          this.$set(this, 'showPayPassword', false);
          this.$router.push({
            'path': '/wallet'
          });
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
  .allwithdrawalInput {
    background-color: #FFF;

    .allwithdrawal {
      color: #0591CC;
      font-size: 26px;
      line-height: 52px;
      padding-right: 20px;
    }
  }

  .loginBtn {
    padding: 278px 30px 0;
  }
</style>
